<template>
  <div class="mvPlay" v-if="mvInfo!=''">
      <h3>{{mvInfo.name}}</h3>
      <p>演唱者：{{mvInfo.artists|filterName}}</p>
      <video :src="mvUrl" controls autoplay></video>
  </div>

</template>

<script>
// import axios from 'axios'
import { getMvUrl, getMvIfon } from '../api'
export default {
    filters:{
     filterName(arr){
         return arr.map(item=>{
             return item.name
         }).join(" & ")
        }
    },
    data() {
        return {
            mvUrl:'',
            mvInfo:''
        }
    },
    created() {
    // 获取MV Url
        getMvUrl({id:this.$route.query.id}).then(res=>{
            this.mvUrl=res.data.data.url
            
        })
        // axios({
        //     url:'https://autumnfish.cn/mv/url?id='+this.$route.query.id
        // }).then(res=>{
        //     this.mvUrl=res.data.data.url
            
        // })
        // 获取mv详情
        getMvIfon({mvid:this.$route.query.id}).then(res=>{
            this.mvInfo=res.data.data
            // window.console.log(res);
        })      
        // axios({
        //     url:'https://autumnfish.cn/mv/detail?mvid='+this.$route.query.id
        // }).then(res=>{
        //     this.mvInfo=res.data.data
        //     // window.console.log(res);
        // })
    },
}
</script>

<style>
    .mvPlay{
        text-align: center;
    }
    .mvPlay video{
        width: 700px;
    }
    .mvPlay p{
        margin: 20px 0;
    }
</style>